<template>
	<div id="homePage">
		<!-- 头部菜单 -->
		<div class="h_topMenu">
			<div class="h_heard_midol"></div>
		</div>
		<!-- 运行视图-->
		<div class="h_center" v-if="runViewState">
			<run-view>
				<template v-slot:topMenu>
				</template>
				<template v-slot:footMenu>
				</template>
			</run-view>
		</div>
		<div class="h_center_img" v-else>
			<div style="width: 50%;height: 300px;">
				<svg width="100%" height="100%" version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink">
					<defs>
						<linearGradient id="eaeef34fd48342ef9d56f206b7a8aeea" x1="0%" y1="0%" x2="79%" y2="0%">
							<stop offset="27%" style="stop-color:rgba(255,0,0,1)"></stop>
							<stop offset="79%" style="stop-color:rgba(0,255,0,1)"></stop>
							<stop offset="100%" style="stop-color:rgba(0,0,255,1)"></stop>
						</linearGradient>
					</defs>
					<text id="svgText3ed6af80d56c48b5af9c46eb5d9f07ad" x="512" y="200" stroke="rgb(255,255,255)"
						stroke-width="0" stroke-dasharray="0" stroke-dashoffset="0"
						fill="url(#eaeef34fd48342ef9d56f206b7a8aeea)" font-size="138px" font-family="Arial"
						text-anchor="middle" text-decoration="none" font-style="normal" font-weight="bold"
						opacity="1">阿拉丁矿工作品</text>
				</svg>
				<svg width="100%" height="100%" version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink">
					<rect x='12' y='12' width='1000' height='1000' rx='120' ry='120' fill='rgb(255, 255, 255)' opacity='1'>
					</rect>
					<text id="svgText3ed6af80d56c48b5af9c46eb5d9f07ad" x="512" y="238" stroke="rgb(255,255,255)"
						stroke-width="0" stroke-dasharray="0" stroke-dashoffset="0" fill="rgb(255,0,0)" font-size="200px"
						font-family="Arial" text-anchor="middle" text-decoration="none" font-style="normal"
						font-weight="bold" opacity="1">传鸿组态</text>
					<path
						d='M675.41 303.61 L669.51 341.64 L665.9 340.33 L663.28 338.03 L660.33 336.39 L657.05 332.46 L656.39 326.56 L655.41 320.65 L658.03 315.08 L660.33 309.51 L662.62 307.87 L665.57 305.57 L671.8 304.26 Z'
						stroke='rgb(0, 0, 0)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' opacity='1'
						fill='rgb(255, 0, 0)'></path>
					<path
						d='M554.79 375.89 L554.79 363.56 L555.34 351.78 L556.99 341.92 L559.45 334.25 L562.19 327.12 L566.3 319.45 L571.51 313.15 L576.71 307.67 L584.11 302.19 L592.88 298.36 L601.09 296.71 L609.31 296.71 L617.81 297.26 L626.57 299.73 L634.79 304.66 L640 307.94 L644.93 312.6 L647.4 316.44 L649.04 318.9 L654.79 318.63 L654.25 323.01 L654.79 326.3 L656.71 333.15 L660 337.81 L666.3 341.37 L668.22 342.19 L667.12 342.74 L667.67 348.77 L644.93 356.44 L644.11 352.6 L642.74 344.66 L639.45 337.53 L636.16 330.68 L628.77 321.37 L621.37 316.44 L612.6 313.42 L603.29 313.7 L593.7 316.71 L585.48 323.83 L580 330.41 L575.34 339.45 L571.78 347.12 L569.86 355.34 L570.41 361.92 L569.86 370.96 L570.96 372.88 Z'
						stroke='rgb(0, 17, 255)' stroke-width='0' stroke-linecap='round' stroke-linejoin='round' opacity='1'
						fill='rgb(238, 10, 36)'></path>
					<rect x='323' y='589' width='212' height='178' rx='0' ry='0' fill='rgb(0, 0, 0)' stroke='rgb(0, 0, 0)'
						stroke-width='1' stroke-linecap='round' stroke-dasharray='0' opacity='1'>
					</rect>
					<ellipse cx='606' cy='364' rx='35' ry='49' fill='rgb(0, 0, 255)' stroke='rgb(0, 0, 0)' stroke-width='0'
						stroke-linecap='round' opacity='1'>
					</ellipse>
					<line x1='727' y1='751' x2='726' y2='609' stroke-width='35' stroke-linecap='round' opacity='1'
						stroke='rgb(0, 0, 255)'></line>
					<line x1='796' y1='753' x2='693' y2='612' stroke-width='35' stroke-linecap='round' opacity='1'
						stroke='rgb(0, 0, 255)'></line>
					<line x1='717' y1='611' x2='608' y2='611' stroke-width='50' stroke-linecap='round' stroke-dasharray='0'
						opacity='1' stroke='rgb(0, 0, 255)'></line>
					<line x1='606' y1='441' x2='607' y2='611' stroke-width='50' stroke-linecap='round' stroke-dasharray='0'
						opacity='1' stroke='rgb(0, 0, 255)'></line>
					<path
						d='M29 768 L535 768 L535 461 L573 461 L575 637 L688 639 L690 768 L818 766 L818 550 L850 569 L882 594 L912 631 L935 667 L954 713 L964 755 L968 786 L969 810 L30 812 Z'
						stroke='rgb(255, 0, 0)' stroke-width='0' stroke-linecap='round' stroke-linejoin='round' opacity='1'
						fill='rgb(0, 255, 0)'></path>
					<circle cx='856' cy='900' r='100' fill='rgb(0, 0, 0)' stroke='rgb(0, 0, 0)' stroke-width='30'
						stroke-linecap='butt' stroke-dasharray='50 5' opacity='1'>
						<animate attributeName="stroke-dashoffset" attributeType="XML" from="1000" to="0" begin="0s"
							dur="10s" repeatCount="indefinite" fill="freeze"></animate>
					</circle>
					<circle cx='327' cy='900' r='100' fill='rgb(0, 0, 0)' stroke='rgb(0, 0, 0)' stroke-width='30'
						stroke-linecap='butt' stroke-dasharray='50 5' opacity='1'>
						<animate attributeName="stroke-dashoffset" attributeType="XML" from="1000" to="0" begin="0s"
							dur="10s" repeatCount="indefinite" fill="freeze"></animate>
					</circle>
					<path d='M423 386 L454 363 L535 509 L504 533 L473 477 L144 727 L54 767 L123 690 L452 441 Z'
						stroke='rgb(0, 0, 0)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' opacity='1'
						fill='rgb(0, 0, 0)'></path>
					<line x1='758' y1='533' x2='830' y2='619' stroke-width='20' stroke-linecap='round' stroke-dasharray='0'
						opacity='1' stroke='rgb(0, 7, 100)'></line>
					<line x1='720' y1='565' x2='792' y2='497' stroke-width='25' stroke-linecap='round' stroke-dasharray='0'
						opacity='1' stroke='rgb(0, 7, 100)'></line>
					<path
						d='M460.58 637.67 L464.66 636.5 L470.48 635.73 L477.47 635.34 L486.6 636.5 L495.53 638.83 L502.13 641.55 L508.15 644.66 L513.01 647.96 L518.83 653.4 L523.3 658.45 L525.44 661.16 L521.75 676.31 L514.95 678.25 L504.85 679.8 L495.14 679.8 L484.85 678.45 L474.76 674.56 L465.63 668.93 L457.09 662.13 L455.73 659.22 Z'
						stroke='rgba(255, 255, 255,0)' stroke-width='0' stroke-linecap='round' stroke-linejoin='round'
						opacity='1' fill='rgb(255, 255, 255)'></path>
					<path d='M455.14 638.06 L469 643 L465 659 L451 656  Z' stroke='rgb(255, 0, 0)' stroke-width='0'
						stroke-linecap='round' stroke-linejoin='round' opacity='1' fill='rgb(255, 255, 255)'></path>
					<path d='M363.78 610.87 L360.16 630.55 L375.64 631.93 L378.87 618.39  Z' stroke='rgb(0, 0, 0)'
						stroke-width='0' stroke-linecap='round' stroke-linejoin='round' opacity='1'
						fill='rgb(255, 255, 255)'></path>
					<line x1='376.2' y1='625.29' x2='520.66' y2='668.1' stroke-width='4' stroke-linecap='round' opacity='1'
						stroke='rgb(255, 255, 255)'></line>
					<path d='M390 731 L398 742 L480 761 L483 760 L484 758 L488 740 L488 737 L487 735 L407 701 L395 707 Z'
						stroke='rgb(0, 0, 0)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' opacity='1'
						fill='rgb(255, 255, 255)'></path>
					<path
						d='M366 694 L359 722 L336 715 L333 723 L335 731 L339 736 L343 741 L350 744 L357 746 L365 747 L374 745 L382 742 L386 737 L387 736 L396 700 L394 694 L391 687 L388 683 L382 676 L374 672 L366 670 L358 670 L350 672 L346 675 L343 679 L343 685 L343 687 Z'
						stroke='rgb(0, 0, 0)' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' opacity='1'
						fill='rgb(255, 255, 255)'></path>
					<circle cx='474' cy='746' r='5' fill='rgb(255, 255, 255)' stroke='rgb(0, 0, 0)' stroke-width='1'
						stroke-linecap='round' opacity='1'></circle>
					<path d='M606 444 L673,532 L734,545 ' stroke='rgb(0,0,225)' stroke-width='32' stroke-linecap='round'
						stroke-dasharray='0' stroke-linejoin='round' opacity='1' fill='rgba(0,0,0,0)'></path>
				</svg>
			</div>

		</div>
		<!-- 底部菜单 -->
		<div class="h_foootMenu">
			<svg width="100%" height="100%" version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink" @click="rightActive = true">
				<circle cx='5' cy='5' r='4' fill='rgb(0, 80,0)' stroke='rgb(0, 80, 0)' stroke-width='1'
					stroke-linecap='round' opacity='1' stroke-opacity='1' fill-opacity='1'></circle>
				<line x1='3' y1='3' x2='7' y2='3' stroke-width='1' stroke-linecap='round' opacity='1'
					stroke='rgb(255, 255, 255)'></line>
				<line x1='3' y1='5' x2='7' y2='5' stroke-width='1' stroke-linecap='round' opacity='1'
					stroke='rgb(255, 255, 255)'></line>
				<line x1='3' y1='7' x2='7' y2='7' stroke-width='1' stroke-linecap='round' opacity='1'
					stroke='rgb(255, 255, 255)'></line>
			</svg>
		</div>
		<!-- 导航列表 -->
		<n-drawer v-model:show="navigationActive" :width="360" :placement="placement">
			<n-drawer-content title="工程树">
				<n-tree block-line :data="navigationList" selectable :node-props="onNodeProps" />
			</n-drawer-content>
		</n-drawer>
		<n-drawer v-model:show="rightActive" :width="360" :placement="rightPlace">
			<n-drawer-content title="导航">
				<div class="h_link">
					<router-link :to="{ name: 'svgEditView' }">
						编辑
					</router-link>
					<router-link :to="{ name: 'threeEditView' }">
						3D编辑
					</router-link>
					<router-link :to="{ name: 'user' }">
						登录
					</router-link>
				</div>
			</n-drawer-content>
		</n-drawer>
	</div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入 ★
/* ================================================================================================ */
import { h, ref, reactive, computed, watch, onMounted } from "vue";
import * as d3 from "d3";
import axios from "axios";
import { useMessage } from 'naive-ui';
import { useRouter } from "vue-router";
import type { DrawerPlacement, NButton } from 'naive-ui'
import { TreeOption } from "naive-ui";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入组件
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { RunView } from "../runView";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useWorkStore } from "@/store/workStore"; // 工作数据

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const workStore = useWorkStore(); // 设备数据
const router = useRouter();
const message = useMessage()// 消息
/* ================================================================================================ */
//                                数据 ★
/* ================================================================================================ */
/** 导航激活*/
let navigationActive = ref(false);
/** 模态框位置*/
const placement = ref<DrawerPlacement>('left')
/** 右侧激活*/
let rightActive = ref(false);
/** 模态框位置*/
const rightPlace = ref<DrawerPlacement>('right')
/** 导航列表 */
let navigationList = computed(() => workStore.navigationList);
/** 导航列表-状态*/
let runViewState = ref(false);
/** 图标尺寸 */
const IconSize = 30;


/** 获取导航列表 */
const onGetNavigationList = () => {
	// // console.log("获取导航列表");
	/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	// 🐸 发送-工程数据
	/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	axios({
		url: `/api/HCIOT?query=getNavigationList`,
		method: "get",
	})
		.then((response: any) => {
			if (response.status === 200) {
				// // console.log(response.data);
				workStore.navigationList = response.data;
				navigationActive.value = true;
			}
		})
		.catch((error: any) => {
			// console.log("故障")
			message.error("获取导航列表;故障")
		});

	/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	// 🐸 添加监听
	/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
};

/** 节点属性 */
const onNodeProps = ({ option }: { option: TreeOption }) => {
	// // console.log("节点属性")
	return {
		onClick: () => {
			// // console.log("点击事件");
			// // console.log(option)
			if (option.layer === 2) {
				if (option.key === 'none') {
					/** 路由 */
					const url = router.resolve({
						path: '/EditView',
					});
					window.close();
					// 打开新窗口
					window.open(url.href);
				}
				if (option.key !== 'none') {
					/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
					// 🐸 发送-获取页面数据
					/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
					axios({
						url: `/api/HCIOT?query=getPageData&Name=${option.pid}&pageId=${option.key}`,
						method: "get",
					})
						.then((response: any) => {
							if (response.status === 200) {
								// // console.log(response.data);
								// 页面数据
								workStore.pageData = response.data.pageData;
								// 图元集合
								workStore.pels = workStore.pageData.pels;
								/** 图元数据  */
								workStore.pelData = workStore.pageData.pelData;
								// 设备数据
								workStore.equipData = response.data.equipData;
								navigationActive.value = false;//导航激活
								runViewState.value = true;//导航列表-状态
								message.success("获取页面数据；成功")
							}
						})
						.catch((error: any) => {
							// console.log("故障")
							message.error("获取页面数据；故障")
						});
				}
			}


		},
	};
};

/* ================================================================================================ */
//                                ★ 钩子函数_挂载后
/* ================================================================================================ */
onMounted(() => {
	// // console.log("钩子函数_挂载后")
	onGetNavigationList();//获取导航列表

});

</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

#homePage {
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	overflow: hidden;
	background: #000;
}

.h_topMenu {
	background-color: rgb(0, 100, 00);
	height: 36px;
	width: 100vw;
	z-index: 1000;
}

.h_center {
	flex: 1;
}

.h_center_img {
	user-select: none;
	flex: 1;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.h_foootMenu {
	background-color: #0571fd;
	height: 36px;
	width: 100vw;
	z-index: 1000;
}

.h_link {
	display: flex;
	flex-direction: column;

	font-size: 20px;
	font-style: normal;
	text-align: center;

	a {
		color: #ffffff;
		margin-top: 10px;
	}
}
</style>
